{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "base-protocol-mozilla.html" %}

{% from "macros-protocol.html" import split, picto, card with context %}

{% block page_title %}Social and Environmental Impact{% endblock %}
{% block page_desc %}Mozilla supports making the internet more equitable, inclusive, and sustainable.{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('protocol-card') }}
  {{ css_bundle('impact') }}
{% endblock %}

{% block content %}
  <main>
    <header>
      <div class="c-hero-banner mzp-l-content">
        <h1>
          <span>Our social</span>
          <span>&</span> <br>
          <span>environmental</span> <br> <span>impact</span>
        </h1>
      </div>

      <div class="c-subheader mzp-l-content">
        <h2>Learn how Mozilla is making the internet more open, accessible, and sustainable</h2>
      </div>
    </header>

    <section class="c-report">
      {% call split(
        block_class='mzp-l-split-center-on-sm-md mzp-l-split-reversed c-foundation',
        image=resp_img(
          url='img/mozorg/impact/sheet-cover.jpg',
          srcset={
            'img/mozorg/impact/sheet-cover-high-res.jpg': '1.5x'
          },
          optional_attributes={
            'class': 'mzp-c-split-media-asset',
            'loading': 'lazy'
          }
        ),
        media_after=False
      ) %}
        <h3>Our 2025 Fact Sheet</h3>
        <p>This Fact Sheet offers a snapshot of Mozilla’s Social and Environmental Impact in 2024, highlighting how we’re working to reduce our environmental footprint and foster a culture of belonging across our global teams.</p>
        <p>
          <a href="https://assets.mozilla.net/pdf/Mozilla_Impact_Report_2025.pdf" class="mzp-c-button">
            View the Fact Sheet
            <span class="mzp-c-button-icon-end">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-labelledby="fact-sheet-icon"><title id="fact-sheet-icon">Download PDF</title><path fill="currentColor" d="m7.24 1.36 5.89 5.89H0v1.5h13.13l-5.89 5.89L8.3 15.7 16 8 8.3.3z"/></svg>
            </span>
          </a>
        </p>
      {% endcall %}
    </section>

    <section class="c-cards mzp-l-content">
      <h3>Join us in making an impact!</h3>

      <div class="mzp-l-card-quarter">
        {{ card(
          title='Make your website more accessible',
          ga_title='Make your website more accessible',
          image=resp_img('img/mozorg/impact/moz-a11y.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
          desc='Tips, hints, and guidelines',
          link_url='https://developer.mozilla.org/en-US/blog/accessibility-celebrating-gaad-2023/'
        )}}

        {{ card(
          title='Become a Fellow',
          ga_title='Become a Fellow',
          image=resp_img('img/mozorg/impact/mofo-fellows.jpg', optional_attributes={"loading": "lazy", "class": "mzp-c-card-image"}),
          desc='Address challenges facing a healthy internet',
          link_url='https://www.mozillafoundation.org/what-we-do/grantmaking/fellowship/'
        )}}
      </div>
    </section>

    <section class="c-past-reports mzp-l-content">
      <h3>Explore our past reports</h3>

      <table class="mzp-u-data-table c-past-reports-table">
        <thead>
          <tr>
            <th>Year</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2024</td>
            <td><a href="https://assets.mozilla.net/pdf/Impact_Report_2024.pdf" aria-label="2024 Mozilla Social & Environmental Impact Report">Mozilla Social &amp; Environmental Impact Report</a></td>
          </tr>
          <tr>
            <td>2023</td>
            <td><a href="{{ url('mozorg.diversity.2022.index') }}" aria-label="2023 Diversity & Inclusion Report">Diversity & Inclusion Report</a></td>
          </tr>
          <tr>
            <td>2023</td>
            <td><a href="{{ url('mozorg.sustainability.index') }}" aria-label="">Sustainability Report (2020-2022 data)</a></td>
          </tr>
          <tr>
            <td>2022</td>
            <td><a href="{{ url('mozorg.diversity.2021.index') }}" aria-label="2022 Diversity & Inclusion Report">Diversity & Inclusion Report</a></td>
          </tr>
          <tr>
            <td>2020</td>
            <td><a href="https://foundation.mozilla.org/en/blog/mozilla-foundation-2020-diversity-disclosure/" aria-label="2020 Mozilla Foundation D&I Report">Mozilla Foundation D&I Report</a></td>
          </tr>
          <tr>
            <td>2020</td>
            <td><a href="https://blog.mozilla.org/careers/mozilla-diversity-inclusion-2019-results/" aria-label="2020 Mozilla Corporation D&I Report">Mozilla Corporation D&I Report</a></td>
          </tr>
          <tr>
            <td>2019</td>
            <td><a href="https://blog.mozilla.org/careers/mozilla-diversity-inclusion-2018-results/" aria-label="2019 Mozilla Corporation D&I Report">Mozilla Corporation D&I Report</a></td>
          </tr>
          <tr>
            <td>2019</td>
            <td><a href="https://blog.mozilla.org/en/mozilla/release-mozillas-greenhouse-gas-emissions-baseline/">Blog: Mozilla’s 2019 Greenhouse Gas Emissions</a></td>
          </tr>
          <tr>
            <td>2019</td>
            <td><a href="https://blog.mozilla.org/wp-content/blogs.dir/278/files/2021/02/Mozillas-2019-Greenhouse-Gas-emissions-baseline_2020-11-18.pdf">Detailed 2019 Greenhouse Gas Emissions Inventory</a></td>
          </tr>
          <tr>
            <td>2018</td>
            <td><a href="https://blog.mozilla.org/careers/diversity-and-inclusion-at-mozilla/" aria-label="2018 Mozilla Corporation D&I Report">Mozilla Corporation D&I Report</a></td>
          </tr>
          <tr>
           <td>2018</td>
            <td><a href="https://blog.mozilla.org/careers/diversity-and-inclusion-at-mozilla-foundation/" aria-label="2018 Mozilla Foundation D&I Report">Mozilla Foundation D&I Report</a></td>
          </tr>
        </tbody>
      </table>
    </section>

  </main>
  {% endblock %}
